<extend name="Public/base" />
<block name="style">
    <style type="text/css">
       
        #main{
            padding: 0px;

        }
        #container{
            height:600px;
        }  
        .navbar{margin: 0px;}
        #addareadiv{position: absolute;z-index: 9999; margin: 10px;width: 400px;}
  
    </style> 
</block>


<block name="body">
    <form action="{:U('changeareaaction')}" method='post' class="form1">  
        <input type="hidden" name='orderid' value='{$data.orderid}'/>
         <input type="hidden" name='ordertype' value="{:I('ordertype')}"/>
    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">订单分区</a>
            </div>
<button class="btn btn-default" onclick="javascript:history.back(-1); return false;">返 回</button>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <button type="button" class="btn btn-default navbar-btn" id='btnshowAddarea'>订单概况</button>
             <button type="button" class="btn btn-default navbar-btn" onclick='btnmove()'>移动到订单坐标</button>
             <a  class="btn btn-default navbar-btn " target="_blank" href="http://map.baidu.com">打开百度地图</a>
      
            将该订单设置成分区
            <select class="navbar-btn" name='areaid'>
                <volist name="arealist" id="vo">
                    <option value="{$vo.id}">{$vo.areaName}</option>
                </volist>
            </select>
             
            <button type="submit" class="btn btn-primary navbar-btn ajax-post" target-form="form1" >确定设置</button>
           
            <div class="nav navbar-nav navbar-right">
                <span style="color:red;">当前剩余未分区订单{$Count}条,团购订单{$tCount}条</span>
                <a href="{:U('Map/changearea')}&ordertype={:I('ordertype')}&orderid={$nextorderid}" class="btn btn-default navbar-btn">下一条</a>
            </div>


        </div><!-- /.navbar-collapse -->

    </nav>
     </form> 
    <!--添加分区面板--->
    <div id="addareadiv" style='display:none;'>
        <div class="panel panel-default">
            <div class="panel-heading">订单概况 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
            <div class="panel-body"> 
                    <div class="form-group">
                        <label>订单编号：</label>
                        <label>{$data.orderid}</label>
                    </div>
                    <div class="form-group">
                        <label>订单地址：</label>
                         <label>{$data.toName}{$data.toPhone}<br/>
                         {$data.toProvince}{$data.toCity}{$data.toArea}{$data.toStreet}
                         </label>
                    </div>
                    <div class="form-group">
                        <label>当前分配分区：</label>
                        <label> <if condition="$data.areaId == 0">未识别<else/><span class="text-danger">{$data.areaId|get_area_name}</span></if></label>
                    </div> 
            </div>
        </div>
    </div>
    <!--编辑分区面板--->
    
 
<!--百度地图--->
<div id="container"> </div>


</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <script type="text/javascript">
                        //导航高亮
                        var $window = $(window);
                        $window.resize(function () {
                            $("#container").css("min-height", $window.height() - 145);
                        }).resize();
                        
                        <eq name="ordertype" value="0">
                      highlight_subnav('{:U('Order/index')}');
                       <else/>
                      highlight_subnav('{:U('GroupPurchase/order')}');
                       </eq>

                      
    </script>



    <script src="http://api.map.baidu.com/api?v=1.5&ak=W7fSw2UYZWEZsT8sr0jH6OuF" type="text/javascript"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <script type="text/javascript">


    var map = new BMap.Map("container");          // 创建地图实例  
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    var opts = {anchor: BMAP_ANCHOR_BOTTOM_RIGHT}
    map.addControl(new BMap.MapTypeControl(opts));
    var point = new BMap.Point(119.440148, 32.400496);  // 创建点坐标  
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    


    function clearAll() {
        //  map.clearOverlays();
        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }

    function dreaw() {
        clearAll();
        $('#pointstext').val("");
        drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
        drawingManager.open();
    }


    $('#btnshowAddarea').click(function () {
        $('#addareadiv').show();
    });

    $('.close').click(function () {
        $('#addareadiv').hide();
        $('#editareadiv').hide();
        clearAll();
    });

    //读取现有区域数据
    function LoadAreaData() {
        map.clearOverlays();
        $.post("{:U('Map/AjaxAreaList')}", {},
                function (data) {
                    $.each(data, function (i, n) {
                       // alert( "Item #" + i + ": " + n.id );
                        var pointarry = makePointArray(n.points);
                        drawPolygon(pointarry, n.id, n.areaName);
                    });
                }, "json");
    }
    //将数据库点数据 转换成百度地图PointArray
    function makePointArray(data) {
        var points = [];
        var dataarry = data.split(';');
        for (var i = 0; i < dataarry.length; i++) {
            var pointstr = dataarry[i].split(',');
            var point = new BMap.Point(pointstr[0], pointstr[1]);
            points.push(point);
        }
        return points;
    }

    //将百度地图PointArray 绘制出来
    function drawPolygon(PointArray, id, areaName) {
        var polygon = new BMap.Polygon(PointArray, {fillColor: "yellow", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillOpacity: 0.2});  //创建多边形
        var centerpoint = polygon.getBounds().getCenter();
        polygon.id = id;
        polygon.areaName = areaName;
        var opts = {
            position: centerpoint, // 指定文本标注所在的地理位置
            offset: new BMap.Size(-10, -10)    //设置文本偏移量
        }
        var label = new BMap.Label(areaName, opts);  // 创建文本标注对象
        label.setStyle({
            color: "red",
            fontSize: "20px",
            height: "20px",
            lineHeight: "20px",
            fontFamily: "微软雅黑",
            fontWeight: "bold",
            padding: "0px",
            border: 'none',
        });
        var check={$data.toLon}; //检查订单是否有坐标值
        
        var marker = new BMap.Marker(new BMap.Point({$data.toLon},{$data.toLat})); // 创建订单点
        map.addOverlay(marker);
       
 
        map.addOverlay(label);
        map.addOverlay(polygon);           //增加多边形
       
    };

 

    //显示仓库
    function showwarehouse() {
        $.getJSON("{:U('Map/AjaxWarehouseList')}", {}, function (json) {
            $.each(json, function (i, n) {
                var point = new BMap.Point(n.lng,n.lat);
                var marker = new BMap.Marker(point); // 创建点
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            });
        });
    }
    
    //移动到订单地址
    function btnmove(){
   
        map.centerAndZoom(new BMap.Point({$data.toLon},{$data.toLat}), 20);
    }
    
    
    LoadAreaData();
    </script> 


</block>
